<template>
	<view class="condview">
		<view class="getNumbox" @click="getNum" v-show="isShow">
			{{getTxt}}
		</view>
		<view class="num" v-show="!isShow">
			剩余 {{countDownTime}}S
		</view>
	</view>
</template>

<script>
	export default {
		name: "verification-code",
		props: {
			seconds: {
				type: Number,
				value: 60
			},
			phone:{
				type: String,
				value: '',
			},
			value:{
				type: Boolean,
				value: false,
			},
		},
		data() {
			return {
				getTxt: '获取验证码',
				countDownTime: 60,
				isShow: true,
				phoneCheckStatus:false,
				localStatus: this.value,
				time:'',
			};
		},
		created() {
			// console.log('uni.getStorageSync(key)',uni.getStorageSync('loginSendTime2'))
			var sendTime = uni.getStorageSync('loginSendTime2')
			var newDateTime = Math.ceil((sendTime - new Date().getTime()) / 1000)
			if(newDateTime <= 60 && newDateTime > 0){
				this.codeCountDown(sendTime)
				this.$emit('openAgreeWith',2)
			}
		},
		methods: {
			getNum: function() {
				if(this.phone==''){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				} else if(this.localStatus == false){
					this.$emit('openAgreeWith',1)
					return
				}
				 //开启倒计时
				let endMsRes = new Date().getTime() + 60000; //当前时间戳加上一分钟的时间戳，相当于当前时间一分钟以后的时间戳
				uni.setStorageSync("loginSendTime2",JSON.stringify(endMsRes)) // 把这个一分钟时候的事件戳存起来
				this.codeCountDown(endMsRes); // 调用封装的方法，传入当前60秒时间
				this.$emit('start')
			},
			//获取短信验证码
			codeCountDown(endMsRes) {
			  this.isShow = false;
			  this.countDownTime = Math.ceil((endMsRes - new Date().getTime()) / 1000); //剩余多少秒
			  this.time = setTimeout(() => {
				 this.countDownTime--;
				if (this.countDownTime < 1) {
				  this.isShow = true;
				  this.countDownTime = 60;
				  uni.removeStorageSync("loginSendTime2")
				  this.getTxt = '获取验证码'
				  this.$emit('end')
				  clearTimeout(this.time);
				} else {
				  this.codeCountDown(endMsRes);
				}
			 }, 1000);
		   },
			// 改变状态
			changeStatus(localStatus){
				this.localStatus = localStatus
				this.getNum()
			},
			
		},
		watch:{
			'value': {
				handler(newVal, oldVal) {
					this.localStatus = newVal
				},
				deep: true,
				immediate: true
			 }
		}
	}
</script>

<style>
	.condview {
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #FF4743;
	}

</style>
